<template>
    <div class="home-home-container d-flex">
        <!--    <div class="font40 bold">欢迎使用</div>-->
        <div class="left">
            <div class="font20 bold mb-15">数据统计</div>
            <div class="l-box o-hidden">
                <div class="item pr-15 pb-15" v-for="(item,index) in list" :key="index">
                    <div class="item-div color-white" :style="{background:colors[mathRandom(colors.length-1)]}">
                        <div class="font20 t-hidden">{{ item.name }}</div>
                        <div class="font20 mt-15">{{ item.len || 0 }}</div>
                    </div>
                </div>
            </div>
            <div class="font20 bold mb-15 mt-20">常用功能</div>
            <div class="l-box o-hidden">
                <div class="item2 pr-15 pb-15 c-pointer" @click="gotoPages(item)" v-for="(item,index) in navs"
                     :key="index"
                     v-if="index>0">
                    <div class="item-div2 color-white" style="background:#909399;">
                        <span class="zsf-icon font26" :class="item.icon"></span>
                        <span class="font16 ml-10 t-hidden">{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="font20 bold mb-15">待处理事项</div>
            <div class="r-box">
                <div class="item flex-center flex-between" @click="gotoPage('/order/list?status=5')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">待处理的新订单</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.order5 }}笔</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="primary">点击查看</el-button>
                </div>
                <div class="item flex-center flex-between" @click="gotoPage('/order/list?status=7')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">待收货的订单</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.order7 }}笔</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="danger">点击查看</el-button>
                </div>
                <div class="item flex-center flex-between" @click="gotoPage('/order/list?status=9')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">待评价的订单</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.order9 }}笔</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="warning">点击查看</el-button>
                </div>
                <div class="item flex-center flex-between" @click="gotoPage('/order/list?status=11')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">申请退货的订单</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.order11 }}笔</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="info">点击查看</el-button>
                </div>
                <div class="item flex-center flex-between" @click="gotoPage('/promotion/list?status=7')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">进行中的活动</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.promotion_status7 }}个</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="success">点击查看</el-button>
                </div>
                <div class="item flex-center flex-between" @click="gotoPage('/user/cert?status=1')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">实名认证申请</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.cert }}个</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="danger">点击查看</el-button>
                </div>
                <div class="item flex-center flex-between" @click="gotoPage('/user/apply?status=1')">
                    <div class="flex-center flex-start" style="width:70%;">
                        <div class="font16">提现申请</div>
                        <div class="font16 color-999 ml-10 mr-15">{{ res.gold }}个</div>
                    </div>
                    <el-button size="mini" v-preventDbClick type="warning">点击查看</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import request from "../../common/js/request";
import {tool} from "../../common/js/tool";

export default {
    data() {
        return {
            colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'],
            list: [],
            navs: this.$store.getters.getTabs,
            res: {
                order5: 0,
                order7: 0,
                order9: 0,
                order11: 0,
                promotion_status7: 0,
                cert: 0,
                gold: 0,
            }
        };
    },

    computed: {},

    created() {
        let res = {
            "code": 0,
            "msg": "成功",
            "data": {
                "order5": 0,
                "order7": 0,
                "order9": 0,
                "order11": 2,
                "promotion_status7": 4,
                "cert": 0,
                "gold": 0,
                "list": [
                    {
                        "name": "总销量（元）",
                        "len": "93.00"
                    },
                    {
                        "name": "成交订单总数",
                        "len": 2
                    },
                    {
                        "name": "会员总数",
                        "len": 0
                    },
                    {
                        "name": "本月总销量（元）",
                        "len": null
                    },
                    {
                        "name": "本月订单总数",
                        "len": 0
                    },
                    {
                        "name": "本月新增会员数",
                        "len": 0
                    },
                    {
                        "name": "今日总销量（元）",
                        "len": null
                    },
                    {
                        "name": "今日订单总数",
                        "len": 0
                    },
                    {
                        "name": "今日新增会员数",
                        "len": 0
                    }
                ]
            }
        }
        this.res = res.data;
        this.list = res.data.list;
    },

    computed: {
        getTabs() {
            return this.$store.getters.getTabs;
        }
    },

    watch: {
        getTabs() {
            this.navs = this.getTabs;
            console.log(this.navs)
        },
    },

    mounted() {
    },

    methods: {
        mathRandom(max) {
            return tool.mathRandom(0, max)
        },
        gotoPages(item) {
            let url = !!item.url ? item.url : item['child'][0].url;
            this.gotoPage(url);
        }
    },

    components: {}
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

.home-home-container {
    width: 100%;

    .left {
        flex: 1;
        width: 0;

        .l-box {
            width: 100%;

            .item {
                width: 33.33%;
                height: 120px;
                float: left;

                .item-div {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 30px;
                    cursor: pointer;

                    &:hover {
                        opacity: 0.9;
                    }
                }
            }

            .item2 {
                height: 80px;
                width: 25%;
                float: left;

                .item-div2 {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    padding-left: 30px;
                }
            }
        }
    }

    .right {
        width: 350px;

        .r-box {
            background: white;
            width: 100%;
            min-height: 560px;
            border-radius: 5px;

            .item {
                padding: 20px;
                border-bottom: 1px solid #eee;
                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }
            }
        }
    }
}
</style>
